{% extends "main/base.html" %}
{% load i18n static %}
{% block title %}AntCook{% endblock %}
{% get_current_language as LANGUAGE_CODE %}
{% block content %}
<div class="row">
    <div class="col-md-7">
        <section class="panel">
            <header class="panel-heading">
                {% if perms.main.add_announce %}
                <a href="{% url 'main:announcement_create' %}?next={{ request.path }}">公告栏</a>{% else %}
                公告栏
                {% endif %}
                <span class="tools pull-right">
                    <a class="fa fa-chevron-down" href="javascript:;"></a>
                    <a class="fa fa-times" href="javascript:;"></a>
                </span>
            </header>
            <div class="panel-body">
                <div class="timeline-messages">
                    {% if a %}{% for an in a %}
                    <div class="msg-time-chat">
                        <div class="message-body msg-out">
                            <span class="arrow"></span>
                            <div class="text">
                                <p class="attribution"> <a href="">{{ an.announced_by }}</a> 在{{ an.datetime_created|timesince }}前发布:</p>
                                {% if perms.main.change_announce %}
                                    {% if an.created_by_id == request.user.pk %}
                                        <a href="{% url 'main:announcement_update' an.pk %}"><b class="title">{{ an.title }} 编辑</b></a>
                                    {% else %}
                                        <b class="title">{{ an.title }}</b>
                                    {% endif %}
                                {% else %}
                                    <b class="title">{{ an.title }}</b>
                                {% endif %}
                                <p>{{ an.remarks|safe|linebreaks }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}{% endif %}
                    <!-- /comment -->
                </div>
                {% if perms.main.add_announce %}
                <div class="chat-form">
                    <div class="form-group">
                        <div class="pull-right chat-features">
                            <a href="{% url 'main:announcement_create' %}?next={{ request.path }}"><button type="button" class="btn btn-primary btn-bottom center-block">发布公告</button></a>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </section>
        <section class="panel">
            <header class="panel-heading">
                用户登录信息
            </header>
            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>姓名</th>
                            <th>最后登录</th>
                        </tr>
                    </thead>
                    <tbody>{% if u %}{% for user in u %}
                        <tr>
                            <td>{{ user.pk }}</td>
                            <td>{% if user.email %}<a href="mailto:{{ user.email }}">{{ user.last_name }} {{ user.first_name }}</a>{% else %}{{ user.last_name }} {{ user.first_name }}{% endif %}</td>
                            <td>{{ user.last_login|timesince }} 前</td>
                        </tr>{% endfor %}{% endif %}
                    </tbody>
                </table>
                {% if perms.main.add_salesman %}
                <div class="pull-right chat-features">
                    <a href="{% url 'main:user_list' %}?next={{ request.path }}"><button type="button" class="btn btn-primary btn-bottom center-block">用户管理</button></a>
                </div>
                {% endif %}
            </div>
        </section>
    </div>
    <div class="col-md-5">
        <div class="panel">
            <div id="order_info_1"></div>
        </div>
        <div class="panel">
            <div id="order_info_2"></div>
        </div>{% if perms.main.view_equipment_basic_price %}
        <div class="panel">
            <div id="order_info_3"></div>
        </div>
        <div class="panel">
            <div id="order_info_4"></div>
        </div>{% endif %}
    </div>
</div>
{% endblock %}
{% block this_js %}
<script src="{% static 'flatlab/assets/highcharts/highcharts.js' %}"></script>
<script src="{% static 'flatlab/assets/highcharts/modules/export-data.js' %}"></script>
<script src="{% static 'flatlab/assets/highcharts/modules/exporting.js' %}"></script>
<script language="JavaScript">
Highcharts.chart('order_info_1', {
    chart: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false},
    title: {text: '{% trans "根据状态分类" %}'},
    tooltip: {pointFormat: '{% trans "数量" %}: {point.y:.0f} <b>{series.name}: {point.percentage:.1f}%</b>'},
    plotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {enabled: false}, showInLegend: true}},
    series: [{type: 'pie',name: '{% trans "产品比例" %}',data: {{ order_info_1|safe }}}],
    credits: {enabled: false},
});
</script>
<script language="JavaScript">
Highcharts.chart('order_info_2', {
    chart: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false},
    title: {text: '{% trans "各销售员比例" %}'},
    tooltip: {pointFormat: '{% trans "数量" %}: {point.y:.0f} <b>{series.name}: {point.percentage:.1f}%</b>'},
    plotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {enabled: false}, showInLegend: true}},
    series: [{type: 'pie', name: '{% trans "比例" %}', data: {{ order_info_2|safe }}}],
    credits: {enabled: false},
});
</script>
{% if perms.main.view_equipment_basic_price %}
<script language="JavaScript">
Highcharts.chart('order_info_3', {
    chart: {type: 'column'},
    title: {text: '{% trans "每月报价单数量" %}'},
    xAxis: {categories: {{ order_info_3_x|safe }}},
    yAxis: {title: {text: "{% trans '数量' %}"}},
    series: [{name: '{% trans "报价单总数" %}', data: {{ order_info_3_y|safe }}},
            {name: {{ order_info_3_x1|safe }}, data: {{ order_info_3_y1|safe }}},
            {name: {{ order_info_3_x2|safe }}, data: {{ order_info_3_y2|safe }}},
            {name: {{ order_info_3_x3|safe }}, data: {{ order_info_3_y3|safe }}},
            {name: {{ order_info_3_x4|safe }}, data: {{ order_info_3_y4|safe }}},
            {name: {{ order_info_3_x5|safe }}, data: {{ order_info_3_y5|safe }}},
    ],
    credits: {enabled: false},
});
</script>
<script language="JavaScript">
Highcharts.chart('order_info_4', {
    chart: {type: 'column'},
    title: {text: '{% trans "每月报价单金额" %}'},
    xAxis: {categories: {{ order_info_3_x|safe }}},
    yAxis: {title: {text: "{% trans '金额/元' %}"}},
    tooltip: {pointFormat: '{series.name}: <b>¥{point.y:.2f}</b>'},
    series: [{name: {{ order_info_3_x1|safe }}, data: {{ order_info_3_z1|safe }}},
            {name: {{ order_info_3_x2|safe }}, data: {{ order_info_3_z2|safe }}},
            {name: {{ order_info_3_x3|safe }}, data: {{ order_info_3_z3|safe }}},
            {name: {{ order_info_3_x4|safe }}, data: {{ order_info_3_z4|safe }}},
            {name: {{ order_info_3_x5|safe }}, data: {{ order_info_3_z5|safe }}},
    ],
    credits: {enabled: false},
});
</script>
{% endif %}
{% endblock %}